<!--
 * @Author: C.
 * @Date: 2023-12-13 14:40:50
-->
<template>
  <PageWrapper title="列表">
    <BaseList @register="register">
      <view v-for="(item, index) in dataRef" :key="index" class="card"
        >卡片{{ index }}</view
      >
    </BaseList>
  </PageWrapper>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { ref } from 'vue'

// ----------------------------- hooks -----------------------------

// ----------------------------- 组件 -----------------------------
import PageWrapper from '@/components/page-wrapper'
import { BaseList, useList } from '@/components/list'
// ----------------------------- 其他引入 -----------------------------
import { DeviceStateEnum } from '@/maps/device/DeviceStateEnum'
//----------------------------- 变量声明区 -----------------------------
const [register, { dataRef, reLoad, load, setParams }] = useList({
  api: () =>
    new Promise((r) => {
      r({
        Items: Array.from({ length: 10 }).fill('1111'),
        Counts: 10,
      })
    }),
  formSchema: [
    {
      label: 'CheckBox',
      field: 'CheckBox',
      component: 'CheckBox',
      componentProps: {
        options: DeviceStateEnum.getEnums(),
      },
    },
    {
      label: 'Radio',
      field: 'Radio',
      component: 'Radio',
      defaultValue: 'Standby',
      componentProps: {
        options: DeviceStateEnum.getEnums(),
      },
    },
    {
      label: 'Select',
      field: 'Select',
      component: 'Select',
      defaultValue: 'Standby',
      componentProps: {
        options: DeviceStateEnum.getEnums(),
      },
    },
  ],
})
// ----------------------------- hooks使用区 -----------------------------

// ----------------------------- 钩子函数区 -----------------------------

//  ----------------------------- 自定义方法区 -----------------------------
</script>
<style lang="scss" scoped>
.card {
  width: 96%;
  margin: 0 2%;
  height: 200rpx;
  margin-top: 20rpx;
  border-radius: 10rpx;
  /* border: 1rpx solid #eee; */
  background-color: #fff;
  @include flexBox;
}
</style>
